<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>店铺</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="lineGrey"></div>
        <div class="bgf plr wd-sjrz">
            <div class="yyzz-detail-item flex-x-sb">
                <div class="flex-x-s">
                    <div class="title">银行卡</div>
                    <input type="text" v-model="pageParam.bankCard"
                        maxlength="19"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        placeholder="请输入银行卡号">
                </div>
            </div>
            <div class="yyzz-detail-item flex-x-sb">
                <div class="flex-x-s">
                    <div class="title">开户行</div>
                    <input type="text" v-model="pageParam.openBank" placeholder="请输入开户行">
                </div>
            </div>
            <div class="yyzz-detail-item flex-x-sb" v-for="(item,index) in pageParam.contactTels" :key="index">
                <div class="flex-x-s">
                    <div class="title">{{index == 0? '联系电话':''}}</div>
                    <input type="tel" placeholder="请输入联系电话" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"
                           v-model="pageParam.contactTels[index]">
                </div>
                <div v-if="index == pageParam.contactTels.length-1 && index != 2">
                    <img @click="addPhone" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/add.png" alt="">
                </div>
                <div v-if="pageParam.contactTels.length > 1">
                    <img @click="delPhone(index)" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/sub.png" alt="">
                </div>
            </div>
            <div class="dp-edit-intro">
                <div class="title">店铺简介</div>
                <van-field v-model="pageParam.shopIntro" rows="1" autosize type="textarea" placeholder="店家偷懒，还没有完善介绍" />
            </div>
        </div>
        <div class="wd-yyzz-submit flex-x-c" @click="updateStoreDetail">
            <div>
                完成
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    message: '',
                    pageParam: {
                        contactTels:['']
                    }
                },
                mounted() {
                    this.pageParam = api.pageParam.apiParam.shop || {}
                },
                methods: {

                    delPhone: function(index){
                        this.pageParam.contactTels.splice(index,1)
                    },

                    addPhone: function() {
                        if (this.pageParam.contactTels.length > 2) {
                            return
                        }
                        if (!this.pageParam.contactTels[this.pageParam.contactTels.length - 1]){
                            toastMiddle('您还没有填写电话号码！');
                            return;
                        }

                        this.pageParam.contactTels.push('')
                    },

                    updateStoreDetail() {
                        const param = {};
                        if (vm.pageParam.bankCard) {
                            if (vm.pageParam.bankCard.indexOf('**') === -1) {
                                param.bankCard = vm.pageParam.bankCard;
                            }
                        // } else {
                        //     toastBottom("请输入银行卡号");
                        //     return ;
                        }

                        param.openBank = vm.pageParam.openBank;
                        // if (!param.openBank) {
                            // toastBottom("请输入开户行");
                            // return ;
                        // }
                        const contactTels = [];
                        for (let i in vm.pageParam.contactTels) {
                            if (vm.pageParam.contactTels[i]) {
                                contactTels.push(vm.pageParam.contactTels[i])
                            }
                        }
                        if (contactTels.length <= 0) {
                        //     toastBottom("请至少填写一个联系电话！")
                        //     return false
                        }else {
                            for (let i = 0; i < contactTels.length; i++) {
                                if (!(/^1[3456789]\d{9}$/.test(contactTels[i]))) {
                                    toastMiddle('请输入正确的手机号！')
                                    return false;
                                }
                            }
                        }
                        param.contactTels = contactTels;
                        param.shopIntro = vm.pageParam.shopIntro;
                        fnPut(interfaces.USER_MODULE.SHOP.UPDATE_USERSHOPINFO, param, true, function(ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {
                                toastMiddle("修改店铺信息成功")
                                api.sendEvent({
                                    name: 'reflesh',
                                })
                                setTimeout(() => {
                                    api.closeWin();
                                }, 1000);
                            } else {
                                toastMiddle(ret ? ret.msg : '');
                            }
                        });
                    }
                },
            })
        }
    </script>
</body>

</html>
